<template>
  <div class="chat-area">
    <!-- 顶部标题栏 -->
    <el-header class="chat-header">
      <el-input
          v-model="title"
          size="large"
          ref="titleInput"
          @blur="saveTitle"
          @keyup.enter="saveTitle"
          class="input-item"
      />
    </el-header>

    <!-- 消息展示区域 -->
    <el-main class="message-area">
      <div v-for="(msg, index) in messages" :key="index" class="message">
        <div :class="['message-bubble', { 'user-message': msg.isUser, 'system-message': !msg.isUser }]">
          <img alt="图标" v-if="!msg.isUser" class="system-icon" src="../../public/home.svg"/>
          <span class="content">{{ msg.text }}</span>
        </div>
      </div>
    </el-main>

    <div class="footer">
      <!-- 输入框 -->
      <Search custom-class="chat-footer"></Search>
      <span class="text">内容由 AI 生成，请仔细甄别</span>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';

import Search from './Search.vue';
import axios from "axios";

const router = useRouter();
const store = useStore();

// 输入框的值
const inputMessage = ref('');
// 消息列表
const messages = ref();

// 标题
const title = ref('');
// 标题输入框的引用
const titleInput = ref(null);

// 发送消息
const sendMessage = () => {
  if (inputMessage.value.trim()) {
    messages.value.push({text: inputMessage.value, isUser: true});
    inputMessage.value = '';
    // 模拟系统回复
    setTimeout(() => {
      messages.value.push({text: '这是系统的回复。', isUser: false});
    }, 500);
  }
};

// 保存标题
const saveTitle = () => {
  // 调用 Vuex action 更新标题
  store.dispatch('updateTitle', title.value);
};

// 监听选中的对话变化，更新标题
watch(
    () => store.getters.selectedChat,
    (newChat) => {
      if (newChat) {
        title.value = newChat.title;
      }
    },
    {immediate: true}
);

// 初始化标题
onMounted(() => {
  const selectedChat = store.getters.selectedChat;

  if (selectedChat) {
    title.value = selectedChat.title;
  }

  // 获取消息列表
  axios.get('/api/message').then(res => {
    messages.value = res.data.data;
  })
});
</script>

<style lang="less" scoped>
.chat-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--color-background);
  color: var(--color-text-color-balck);

  .chat-header {
    text-align: center;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .input-item {
      width: 50%;

      :deep(.el-input__wrapper) {
        background-color: var(--color-background);
        box-shadow: none;

        input {
          color: var(--color-text-color-balck);
          font-size: 16px;
          font-weight: 600;
          text-align: center;
          border-radius: 8px;

          &:focus {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
          }

          &:hover {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
          }
        }
      }
    }
  }

  .message-area {
    flex: 1;
    padding: 20px;
    /* 隐藏滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */

    /* 隐藏 WebKit 浏览器的滚动条 */

    &::-webkit-scrollbar {
      display: none;
    }

    .message {
      margin-bottom: 10px;

      .message-bubble {
        max-width: 70%;
        padding: 10px 15px;
        border-radius: 15px;
        word-wrap: break-word;
        font-size: 16px;
        color: var(--color-message-text-color);
      }

      .user-message {
        background-color: var(--color-message-background);
        margin-left: auto;
      }

      .system-message {
        margin-right: auto;
        display: flex;
        align-items: center;

        .system-icon {
          width: 32px;
          height: 32px;
          margin-right: 8px;
        }

        .content {
          align-self: flex-end;
        }
      }
    }
  }

  .footer {
    margin: 0 30px 2px 30px;

    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgb(115, 115, 115);
      font-size: 12px;
      margin: 6px 0;
    }
  }
}
</style>
